<template>
    <li @click="GoDetails(item.pid)">
      <div class="hot-img">
        <img class="img-auto" :src="item.largeImg" alt="" />
      </div>
      <div class="details">
        <div class="name">{{ item.name }}</div>
        <div class="enname">{{ item.enname }}</div>
        <div class="price">&yen; {{ item.price }}</div>
      </div>
    </li>
</template>

<script>
export default {
  name: "Product",
  props: {
      item: {
          type: Object,
          defaule() {
              return {}
          }
      }
  },
  methods: {
      // 跳转到详情页
      GoDetails(pid) {
          this.$router.push({name: 'Details', params: {pid}})
      }
  }
};
</script>

<style lang="less" scoped>
li {
  width: 172px;
  height: 204px;
  background-color: #fff;
  margin-bottom: 12px;
  border-radius: 10px;
  overflow: hidden;
  .hot-img {
    width: 172px;
    height: 130px;
    background-color: #e1effc;
  }
  .details {
    width: 172px;
    height: 74px;
    background-color: #fff;
    padding: 10px;
    .name {
      font-size: 14px;
      color: #666;
    }
    .enname {
      font-size: 12px;
      color: #999;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .price {
      font-size: 14px;
      color: #e37d2a;
      font-weight: bold;
      margin-top: 5px;
    }
  }
}
</style>